<template>

  <div id="app" style="height: 100%">
    <div v-if="!isAdmin" class="d-flex flex-column" style="height: 100%">
      <nav-bar :show-ad="showAd" :username="uname" :is-login="isLogin" @logout="logout" style="flex: 0 0 auto"></nav-bar>
      <router-view style="flex: 1 0 auto"/>
      <my-footer :show-ad="showAd" style="flex: 0 0 auto"></my-footer>
    </div>
    <div v-else>
      <router-view/>
    </div>
  </div>
</template>


<script>
  import NavBar from "./components/NavBar";
  import MyFooter from "./components/Footer"

  export default {
    components: {
      NavBar,
      MyFooter
    },

    data() {
      return {
        isAdmin: false,
        // showAd: true,
      }
    },
    methods: {
      logout() {
        this.$store.commit("quit")
        this.$router.push("/")
      }
    },
    computed: {
      showAd() {
        if (this.$route.path === '/') {
          return true
        }
      },
      uname() {
        return this.$store.state.nickname
      },
      isLogin(){
        return this.$store.state.token !== ''
      }
    }
  }
</script>

<style>

</style>
